<template>
  <div class="service-modal-view">
    <a-modal
      v-model:visible="modalVisible"
      title="在线客服"
      :mask="false"
      :maskClosable="false"
      width="400px"
      style="position: absolute; bottom: 0px; right: 0px; top: unset"
      @ok="handleOk"
      :footer="null"
    >
      <div class="service-content">
        <div class="service-message" ref="chatItemRef">
          <div v-for="item in messageList" :key="item.id">
            <div class="message-name" v-if="item.senderId == serviceId">在线客服</div>
            <div class="message-name message-name-right" v-else>{{ item.createTime }}</div>
            <div class="message-left" v-if="item.senderId == serviceId">
              {{ item.content }}
            </div>
            <div v-else class="message">
              <div class="message-right">
                {{ item.content }}
              </div>
            </div>
          </div>
        </div>
        <div class="service-textarea" style="position: relative">
          <a-textarea placeholder="请输入" :rows="4" v-model:value="messageContent"></a-textarea>
          <a-button class="send-button" type="primary" @click="handleSendMesage">发送</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { computed, nextTick, onMounted, ref, watch } from 'vue';
  import { formatToDateTime } from '/@/utils/dateUtil';
  import { getDeviceId } from '/@/utils/util';

  interface Props {
    modalVisible: boolean;
  }
  const props = withDefaults(defineProps<Props>(), {});

  const emit = defineEmits(['update:modalVisible', 'sendMessage']);
  const modalVisible = computed({
    get: () => props.modalVisible,
    set: (val) => {
      emit('update:modalVisible', val);
    },
  });

  const serviceId = 'e9ca23d68d884d4ebb19d07889727dae';

  const chatItemRef = ref();

  const messageContent = ref('');

  const messageList = ref([]);

  const handleOk = () => {
    modalVisible.value = false;
  };

  const handleSendMesage = () => {
    const params = {
      id: messageList.value.length + 1,
      content: messageContent.value,
      senderId: getDeviceId(),
      receiverId: serviceId,
      createTime: formatToDateTime(new Date()),
    };
    messageList.value.push(params);

    setTimeout(() => {
      scrollToBottom();
    }, 150);

    emit('sendMessage', messageContent.value);

    messageContent.value = '';

    localStorage.setItem('messageList', JSON.stringify(messageList.value));
  };

  const scrollToBottom = () => {
    if (chatItemRef.value) {
      chatItemRef.value.scrollTop = chatItemRef.value.scrollHeight;
    }
  };

  watch(modalVisible, (newValue) => {
    if (newValue) {
      nextTick(() => {
        scrollToBottom();
      });
    }
  });

  const getMessageInfo = (data) => {
    if (!data) {
      return;
    }
    console.log('getMessageInfo  data ==>', data);
    messageList.value.push(data);

    setTimeout(() => {
      scrollToBottom();
    }, 150);
  };

  onMounted(() => {
    const data = localStorage.getItem('messageList');
    if (!data) {
      return;
    }
    messageList.value = JSON.parse(data);

    scrollToBottom();
  });

  defineExpose({
    getMessageInfo,
  });
</script>

<style lang="less" scoped>
  .service-modal-view {
  }

  .service-content {
    height: 500px;
    padding: 0 20px;
  }

  .service-message {
    height: 380px;
    overflow-y: auto;
    padding: 20px 10px;
  }

  .message {
    width: 100%;
    text-align: right;
  }

  .message-name {
    color: #b1b1b1;
    margin-top: 15px;
    margin-bottom: 5px;
  }

  .message-name-right {
    text-align: right;
  }

  .message-left {
    background: #e5e5e5;
    border-radius: 10px 10px 10px 0;
    padding: 15px;
    display: inline-block;
  }

  .message-right {
    background: dodgerblue;
    border-radius: 10px 10px 0 10px;
    padding: 15px;
    color: #ffffff;
    display: inline-block;
    text-align: left;
  }

  .service-textarea {
    bottom: 0;
  }

  .send-button {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
</style>
